import React, { useState } from 'react'
import { Card, Typography, Space } from 'antd'
import { TipTapEditor } from '../../components/Editor/RichTextEditor'

const { Title, Paragraph } = Typography

/**
 * 富文本编辑器演示页面
 * 用于测试TipTap编辑器的功能
 */
const RichTextEditorDemo: React.FC = () => {
  const [content, setContent] = useState('<h1>欢迎使用富文本编辑器</h1><p>这是一个基于TipTap的富文本编辑器演示。</p><p>支持的功能：</p><ul><li>文本格式化（粗体、斜体、下划线等）</li><li>标题层级（H1-H6）</li><li>列表（有序、无序、任务列表）</li><li>表格</li><li>代码块</li><li>链接和图片</li><li>文本颜色和高亮</li><li>导出为Markdown或HTML</li></ul><p></p>')

  const handleContentChange = (html: string) => {
    setContent(html)
    console.log('[RichTextEditorDemo] 内容变化', {
      length: html.length,
      preview: html.substring(0, 100) + '...'
    })
  }

  return (
    <div style={{ padding: '24px', height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* 页面标题 */}
      <div style={{ marginBottom: '16px' }}>
        <Title level={2} style={{ margin: 0 }}>富文本编辑器演示</Title>
        <Paragraph type="secondary" style={{ margin: '4px 0 0 0' }}>
          测试TipTap富文本编辑器的各项功能
        </Paragraph>
      </div>

      {/* 编辑器区域 */}
      <Card
        title="编辑器"
        variant="borderless"
        style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
        bodyStyle={{ padding: 0, flex: 1, display: 'flex', flexDirection: 'column' }}
        extra={
          <Space>
            <span style={{ color: '#8c8c8c', fontSize: '14px' }}>
              内容长度: {content.length} 字符
            </span>
          </Space>
        }
      >
        <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
          <TipTapEditor
            content={content}
            onChange={handleContentChange}
            theme="light"
            readOnly={false}
          />
        </div>
      </Card>

      {/* 调试信息 */}
      <Card
        title="调试信息"
        variant="borderless"
        style={{ marginTop: '16px' }}
        size="small"
      >
        <pre style={{
          maxHeight: '200px',
          overflow: 'auto',
          backgroundColor: '#f5f5f5',
          padding: '12px',
          borderRadius: '4px',
          fontSize: '12px'
        }}>
          {content}
        </pre>
      </Card>
    </div>
  )
}

export default RichTextEditorDemo
